<template>
	<view class="">
		<view class="top1" v-if="type=='zczx'">
			<p style="text-align: center; font-size: 33px; color: white;">{{type_name}}</p>
		</view>
		<view class="top2" v-if="type=='yjfk'">
			<p style="text-align: center; font-size: 33px; color: white;">{{type_name}}</p>
		</view>
		<view class="top3" v-if="type=='jjkg'">
			<p style="text-align: center; font-size: 33px; color: white;">{{type_name}}</p>
		</view>
		<view class="uni-form-item uni-column" style="width: 80%; margin:5% auto 0 auto;">
			<view class="title">{{type_name}}主题<span style="color: red;">*</span></view>
			<uni-easyinput v-model="title"  placeholder="输入标题"></uni-easyinput>
<!-- 			<input class="uni-input" style="border: 1px solid black;border-radius: 5px;" v-model="title" placeholder="输入标题" /> -->
		</view>
		<view class="uni-form-item uni-column" style="width: 80%; margin:5% auto 0 auto;">
			<view class="title">{{type_name}}内容<span style="color: red;">*</span></view>

<!-- 			<textarea @blur="bindTextAreaBlur" v-model="content" placeholder="输入内容"/> -->
			<uni-easyinput v-model="content" type="textarea" placeholder="输入内容"></uni-easyinput>

		</view>
		<view class="uni-form-item uni-column" style="width: 80%; margin:3% auto 0 auto;">
			<view class="title">附件上传</view>
			<view style="width: 50%;">
				<button type="primary"  plain="true" size="mini" @tap="uploadImages">附件上传图片</button>
			</view>
			<image  mode="aspectFit" style="width: 90%; margin: 0 auto 0 auto;" :src="img_src" v-if="img_src!=''"></image>
		</view>
		<view class="uni-form-item uni-column" style="width: 80%; margin:5% auto 0 auto;">
			<view class="title">是否留下您的联系方式<span style="color: red;">*</span></view>
				<view class="uni-padding-wrap">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
							<radio :value="item.value" :checked="item.index === current" />{{item.name}}
					</label>
				</radio-group>
			</view>
			<view class="">
				<p style="color: rgb(93, 93, 93); font-size: 12px;">如果您选择留下联系方式，可更方便对您进行回复，无论您是否留下联系方式，都不影响意见的反馈。</p>
			</view>
		</view>
		<view class="uni-form-item uni-column" style="width: 80%; margin:5% auto 0 auto;" v-if="current_type=='yes'">
			<view class="" style="display: flex;">
				<label >您的姓名</label>
				<label style="margin-left:13%;">您的联系方式</label>
				<label  style="margin-left: 15%;">您的身份</label>
			</view>
			<view class="" style="display: flex;">
<!-- 				<input class="uni-input" v-model="name" style="border: 1px solid black;border-radius: 5px; font-size: 12px; width: 20%;"  placeholder="请输入" /> -->
				<uni-easyinput v-model="name"  placeholder="请输入"></uni-easyinput>
<!-- 				<input class="uni-input" v-model="phone" style="border: 1px solid black;border-radius: 5px; font-size: 12px; width: 30%; margin-left: 5%;"  placeholder="请输入" /> -->
				<uni-easyinput v-model="phone"  placeholder="请输入" type="number"></uni-easyinput>

				      <uni-data-select
				        v-model="current"
				        :localdata="range"
				        @change="bindPickerChange"
				      ></uni-data-select>

<!-- 				<view class="uni-list" style="border: 2px solid darkblue; font-size: 12px; width: 30%; margin-left: 5%;" >
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></view>
							</picker>
						</view>
					</view>
				</view> -->
				<!-- <input class="uni-input" style="border: 1px solid black;border-radius: 5px; font-size: 12px; width: 25%; margin-left: 15%;"  placeholder="请输入" /> -->
			</view>
		</view>
				<uni-popup ref="popup1" type="center" background-color="#fff" border-radius="10px 10px 0 0">
				<h1>所有信息提交后不可再修改</h1>
			

				<button type="primary" style="background: #4e72d5; margin-top: 5%;" @tap="post">确认提交</button>
				<button type="primary" style="background: #dddddd; margin-top: 15%;" @tap="closeBox">取消</button>
			</uni-popup>
		<view class="uni-padding-wrap uni-common-mt" style="width: 30%; margin: 5% auto 0 40%;">
			<button @tap="openBox"  type="primary" size="mini">提交</button>
		</view>
		<popview4 ref="popview4"></popview4>
		<loading
			ref="loading"
			:custom="false"
			:shadeClick="true"
			:type="1"
			>
			<view style="text-align: center;">等待中<span v-if="img_src!=''">{{percent}}%</span></view>
		</loading>
	</view>
</template>

<script>
	import popview4 from '@/components/pop-view/pop-view4.vue'
	import loading from '../../components/xuan-loading/xuan-loading.vue'
	export default {
		components: {
			popview4,
			loading
		  },
		data() {
			return {
				        range: [
				          { value: 0, text: "船员" },
				          { value: 1, text: "船企" },
				          { value: 2, text: "职工" },
				        ],
				title:"",
				content:"",
				user_info:"",
				array: ['船员', '船企', '职工'],
				current_identity:"船员",
				name:"",
				phone:"",
				index: 0,
				items: [{
						value: 'yes',
						name: '是',

					},
					{
						value: 'no',
						name: '否',
						checked: 'true'
					},
				],
				current: 0,
				current_type:"no",
				img_src:'',
				a:'',
				type:"",
				type_name:"",
				percent:100
			}
		},
		onLoad(option) {
			// console.log(option)
			let value = uni.getStorageSync('user_info');
			this.user_info=value
			this.type=option.type
			//type
			this.type_name=option.type_name
		},
		methods: {
			bindTextAreaBlur(){
				console.log(this.content)
			},
			radioChange(evt) {
				console.log(evt.detail.value)
				this.current_type=evt.detail.value
			},
			bindPickerChange(e) {

				this.index = e
				this.current_identity=this.array[this.index]
				console.log(this.current_identity)
			},

			async uploadImages(){
				console.log(222)
				let a= await uni.chooseImage({
				  count: 1,
				  success:(res)=>{
					console.log(res);
					if (res.tempFilePaths.length > 0) {
					  let filePath = res.tempFilePaths[0]
					  //进行上传操作
					  console.log(filePath)
					this.img_src=filePath
					  // promise方式
					 //  const result = await uniCloud.uploadFile({
						// filePath: filePath,
						// cloudPath: 'a.jpg',
						// onUploadProgress: function(progressEvent) {
						//   console.log(progressEvent);
						//   var percentCompleted = Math.round(
						// 	(progressEvent.loaded * 100) / progressEvent.total
						//   );
						// }
					 //  });
					// let img_name=Date.now()
					  // callback方式，与promise方式二选一即可
					 //  uniCloud.uploadFile({
						// filePath: filePath,
						// cloudPath: img_name+'.jpg',
						// onUploadProgress: function(progressEvent) {
						//   console.log(progressEvent);
						//   var percentCompleted = Math.round(
						// 	(progressEvent.loaded * 100) / progressEvent.total
						//   );
						// },
						// success() {},
						// fail() {},
						// complete() {}
					 //  });

					}
				  }
				});				
			},
			openBox(){
				this.$refs.popup1.open('center')
			},
			closeBox(){
				this.$refs.popup1.close()
			},
			post(){
				let img_name=Date.now()+'.jpg'
				console.log(img_name)
				let obj={
					"title":this.title,
					"content":this.content,
					"user_info":this.user_info,
					"name":this.name,
					"phone":this.phone,
					"identity":this.current_identity,
					"is_show":true,
					"img_src":"",
					"reply":"",
					"leader_info":"",
					"type":this.type,
					"date":this.getTime()
				}
				if(this.title.length==0){
					this.$refs['popview4'].error('请输入标题');
				}else if(this.content.length==0){
					this.$refs['popview4'].error('请输入内容');
				}else if(this.img_src==''){					
					this.$refs.loading.open();
					uniCloud.callFunction({
					    name: 'post',
					    data: obj
					  })
					  .then(res => {
						let result=res.result
						this.$refs.loading.close();
						console.log(result)
						this.$refs['popview4'].success('发布成功');
						this.title="";
						this.content=""
					  });
				}
				else{
					
					this.$refs.loading.open();
					  uniCloud.uploadFile({
						filePath: this.img_src,
						cloudPath: img_name,
						onUploadProgress:(progressEvent)=>{
						  console.log(progressEvent);
						  let percentCompleted = Math.round(
							(progressEvent.loaded * 100) / progressEvent.total
						  );
						  this.percent=percentCompleted;
						  console.log(percentCompleted)
						},
						success:(r)=>{
							console.log(r)
							obj.img_src=r.fileID
							uniCloud.callFunction({
								name: 'post',
								data: obj
							  })
							  .then(res => {
								let result=res.result
								this.$refs.loading.close();
								console.log(result)
								this.$refs['popview4'].success('发布成功');
								this.title="";
								this.content=""
								this.img_src=""
							  });							
						},
						fail() {},
						complete() {}
					  });

				}				
			},
			getTime(){
				var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				return timer;
			}
		}
	}
</script>


<style scoped>
	.top1{
		width: 100%;
		height: 20vh;
		padding-top: 10vh;
		background-image: url('https://mp-40cfdf28-d8fa-4dc1-a8f9-a7a30a1a9419.cdn.bspapp.com/解台船闸.jpg');
/* 		background: rgba(13, 58, 117, 0.4); */
	}
	.top2{
		width: 100%;
		height: 20vh;
		padding-top: 10vh;
		background-image: url('https://mp-40cfdf28-d8fa-4dc1-a8f9-a7a30a1a9419.cdn.bspapp.com/俯瞰水清岸绿的京杭运河徐州段。徐州航务中心供图.JPG');
/* 		background: rgba(13, 58, 117, 0.4); */
	}
	.top3{
		width: 100%;
		height: 20vh;
		padding-top: 10vh;
		background-image: url('https://mp-40cfdf28-d8fa-4dc1-a8f9-a7a30a1a9419.cdn.bspapp.com/京杭运河和中运河交汇口，水清岸绿.jpg');
/* 		background: rgba(13, 58, 117, 0.4); */
	}
	.a{
		display: flex;
		margin-top: 5%;
	}
	radio-group label:nth-child(2){
		margin-left: 10%;
	}
</style>
